<!--
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-09 19:29:25
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-07-10 17:11:39
 * @FilePath: \mygit\实验\15.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        section {
            height: 800px;
        }

        h1 {
            font-style: 45px;
            color: #fff;
            text-align: center;
            line-height: 800px;
        }

        #red {
            background: #73262e;
        }

        #orange {
            background: #8a582f;
        }

        #yellow {
            background: #8f912f;
        }

        #green {
            background: #216732;
        }

        #nav {
            position: fixed;
            right: 50px;
            bottom: 80px;
            border: 2px solid #eee;
        }

        #nav li {
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            border-bottom: 2px solid rgba(238, 238, 238, 0.8);
            cursor: pointer;
        }

        #nav li:last-child {
            border: none;
        }

        #nav li.active {
            color: #000;
            background: rgba(238, 238, 238, 0.7);
        }
    </style>
</head>

<body>
    <section id="red">
        <h1>RED</h1>
    </section>
    <section id="orange">
        <h1>ORANGE</h1>
    </section>
    <section id="yellow">
        <h1>YELLOW</h1>
    </section>
    <section id="green">
        <h1>GREEN</h1>
    </section>

    <ul id="nav">
        <li class="active">RED</li>
        <li>ORANGE</li>
        <li>YELLOW</li>
        <li>GREEN</li>
    </ul>

    <script>
        const lis = document.querySelectorAll('#nav li')
        const htmlEle = document.documentElement

        let currentIndex = 0
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                changActive(i)
                window.scrollTo({
                    top: 800 * i,
                    behavior: 'smooth'
                })
            }
        }

        window.onscroll = function () {
            let tempIndex = Math.floor((htmlEle.scrollTop + 400) / 800)
            if (currentIndex != tempIndex) {
                changActive(tempIndex)
            }
        }


        function changActive(index) {
            currentIndex = index
            for (let i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
            lis[currentIndex].className = 'active';
        }




    </script>
</body>

</html>